<template>
	<view class="water-card-wrap gradient-wrap">
		<view class="space-between flex-a pt-32 pb-24 pr-16">
			<view class="card-title">
				<view class="font-600">为你推荐</view>
				<view class="c-grey-9e flex-a fs-24 sub-title">旅行种草·尽情游玩</view>
			</view>
			<view class="c-grey-86 flex-a fs-24" @click="navigateTo('/pages/feed/note/index')">
				全部
				<text class="arrow-right ml-4"></text>
			</view>
		</view>
		<view class="water-layout flex-wrap">
			<view class="flex-1 mr-16">
				<waterfall-card class="water-item" v-for="(item, index) in leftList" :key="index" :itemData="item" />
			</view>
			<view class="flex-1">
				<waterfall-card
					class="water-item"
					v-for="(rightItem, index) in rightList"
					:key="index"
					:itemData="rightItem"
				/>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue"
import WaterfallCard from "@/pages/home/components/waterfull-card.vue"
import { navigateTo } from "@/utils/page-redirect"

const props = defineProps({
	listData: {
		type: Array,
		default: [],
	},
})

const allData = ref<any>([])
const leftList = ref<any>([])
const rightList = ref<any>([])

onMounted(() => {
	allData.value = props.listData
	allData.value.forEach((item: any, index: number) => {
		if (index % 2 === 0) {
			leftList.value.push(item)
		} else {
			rightList.value.push(item)
		}
	})
})
</script>
<style lang="scss" scoped>
.gradient-wrap {
	background: linear-gradient(to bottom, #ffffff, #f1f2f5);
	border-top-left-radius: 16rpx;
	border-top-right-radius: 16rpx;
}
.water-card-wrap {
	padding: 0 8rpx 24rpx 24rpx;
	border-radius: 16rpx;
	.card-title {
		border-radius: 16rpx;
		font-size: 36rpx;
		color: $c-black-1d;
		position: relative;
		display: flex;
		align-items: flex-end;
		gap: 12rpx;
		.sub-title {
			line-height: 40rpx;
		}
	}
}
.water-layout {
	.water-item {
		width: 100%;
		border-radius: 16rpx;
		background: #fff;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		display: flex;
		flex-direction: column;
	}

	.u-column:last-child {
		.water-item {
			background: #ff0000;
			margin-right: 0 !important;
		}
	}
}
</style>
